<template>
    <div class="login">
        <!-- logo -->
        <div class="logo">
            <img class="img" src="//award.xmcdn.com/yx/fe-passport/last/dist/images/new-logo-m@2x_2909eca.png">
        </div>
        <!-- 验证 -->
        <div class="logOn">
            <div class="logOn-tabs">
                <van-tabs line-width="50%" title-active-color="#f96460" color="#f96460" @click-tab="onClick">
                    <van-tab title="密码登录"></van-tab>
                    <van-tab title="验证码登录"></van-tab>
                </van-tabs>
            </div>
            <div class="tel">

                <van-cell-group inset>
                    <van-field label="+86∨" placeholder="请输入手机号" label-align="center" label-class="phone" v-model="phone" />
                </van-cell-group>

                <van-field v-if="isshow" type="password" placeholder="请输入密码(密码111111)" v-model="mima" right-icon="eye" />
            </div>

        </div>

        <!-- 登录 -->
        <div class="loging">
            <van-button v-if="phone && mima" round type="success" color="#28c445" size="large"
                @click="toLogin">登录</van-button>

        </div>

        <!-- 协议 -->
        <div class="loginAgreement">
            <van-checkbox-group v-model="ischecked" checked-color="#f86442" icon-size="16px" ref="checkboxGroup">
                <van-checkbox name="a">
                </van-checkbox>
                <p class="content">
                    <span>首次登录会自动创建新账号，且代表同意</span>
                    <a class="waring"  href="https://passport.ximalaya.com/page/register_rule">《用户服务协议》</a>
                    <span>和</span>
                 
                    <a class="waring" href="https://passport.ximalaya.com/page/privacy_policy">《隐私政策》</a>
                </p>
            </van-checkbox-group>
        </div>
        <!-- 其他登陆方式 -->
        <div class="loginWay">
            <van-divider>其他登陆方式</van-divider>
            <div class="icon">

                <svg t="1694782062627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="4057" width="60" height="100">
                    <path
                        d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                        fill="#28C445" p-id="4058"></path>
                    <path
                        d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                        fill="#28C445" p-id="4059"></path>
                </svg>
                <svg t="1694782119789" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="5072" width="60" height="100">
                    <path
                        d="M512 0C229.243259 0 0 229.224296 0 512s229.243259 512 512 512 512-229.224296 512-512S794.756741 0 512 0zM460.8 778.24c-175.312593 0-317.44-91.685926-317.44-204.781037 0-113.095111 212.859259-291.688296 294.286222-291.688296 34.133333 0 101.148444 25.448296 54.272 106.078815-3.280593 5.632 105.718519-46.895407 165.300148-12.344889 59.600593 34.550519 0 90.055111 0 96.218074 0 6.162963 119.656296 6.162963 119.656296 101.717333C776.874667 686.554074 636.112593 778.24 460.8 778.24zM710.276741 359.461926c-19.740444-23.438222-55.030519-17.957926-55.030519-17.957926-10.334815 0.094815-18.375111-7.111111-19.797333-16.839111-0.132741 0.986074-0.568889 1.896296-0.568889 2.901333l0-5.707852c0 1.005037 0.436148 1.85837 0.568889 2.806519 1.422222-9.993481 9.53837-18.792296 19.740444-20.138667 0 0 42.723556-11.681185 79.739259 21.636741 37.015704 33.317926 21.864296 88.405333 21.864296 88.405333-1.592889 11.207111-12.553481 20.15763-23.931259 20.15763L730.832593 434.725926c-11.396741 0-18.033778-8.779852-14.904889-19.607704C715.927704 415.099259 729.998222 382.900148 710.276741 359.461926zM850.62163 430.26963c-1.422222 15.587556-15.018667 28.273778-30.511407 30.01837 1.137778 0.132741 2.23763 0.341333 3.432296 0.341333l-6.97837 0c1.194667 0 2.37037-0.208593 3.546074-0.341333-15.018667-1.744593-25.125926-14.449778-22.945185-30.056296 0 0 16.70637-64.606815-23.988148-123.031704-40.713481-58.424889-128.208593-48.336593-128.208593-48.336593-15.54963-0.018963-28.596148-11.45363-30.245926-26.718815-0.113778 1.080889-0.32237 2.123852-0.32237 3.223704l0-6.409481c0 1.099852 0.208593 2.123852 0.32237 3.185778 1.649778-15.265185 14.506667-27.439407 30.340741-27.553185 0 0 91.098074-9.197037 158.947556 54.954667C871.860148 323.678815 850.62163 430.26963 850.62163 430.26963z"
                        fill="#F56467" p-id="5073"></path>
                    <path d="M450.56 573.44m-20.48 0a1.08 1.08 0 1 0 40.96 0 1.08 1.08 0 1 0-40.96 0Z" fill="#F56467"
                        p-id="5074"></path>
                    <path
                        d="M403.303951 640.642444a1.62 2.159 0 1 0-25.964544-55.683072 1.62 2.159 0 1 0 25.964544 55.683072Z"
                        fill="#F56467" p-id="5075"></path>
                    <path
                        d="M432.033185 451.830519c-111.995259 15.739259-194.484148 87.514074-184.263111 160.331852 10.221037 72.817778 109.321481 119.087407 221.335704 103.329185 112.014222-15.739259 194.503111-87.514074 184.282074-160.331852C643.147852 482.360889 544.047407 436.091259 432.033185 451.830519zM448.398222 695.675259c-66.635852 12.951704-129.384296-21.560889-140.174222-77.065481-10.789926-55.523556 34.474667-111.009185 101.091556-123.960889 66.635852-12.970667 129.384296 21.541926 140.174222 77.065481C560.260741 627.218963 515.015111 682.723556 448.398222 695.675259z"
                        fill="#F56467" p-id="5076"></path>
                </svg>
                <svg t="1694782172221" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="8953" width="60" height="100">
                    <path
                        d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
                        fill="#FAAD08" p-id="8954"></path>
                    <path
                        d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
                        fill="#FAAD08" p-id="8955"></path>
                    <path
                        d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
                        fill="#000000" p-id="8956"></path>
                    <path
                        d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
                        fill="#000000" p-id="8957"></path>
                    <path
                        d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
                        fill="#FFFFFF" p-id="8958"></path>
                    <path
                        d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
                        fill="#FAAD08" p-id="8959"></path>
                    <path
                        d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
                        fill="#000000" p-id="8960"></path>
                    <path
                        d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
                        fill="#FFFFFF" p-id="8961"></path>
                    <path
                        d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
                        fill="#EB1C26" p-id="8962"></path>
                    <path
                        d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
                        fill="#EB1C26" p-id="8963"></path>
                </svg>
            </div>
        </div>



    </div>
    
</template>

<script setup lang="ts">
import { showNotify } from 'vant';
import { type loginObjModel } from '@/api/login'
import { reqLogin } from '@/api/login'
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import {setToken} from '../../utils/token'
// const userInfoStore = useUserInfoStore()
// const route = useRoute()
const router = useRouter()
const isshow = ref(true)
const ischecked = ref([])
const checkboxGroup = ref(null);
const phone = ref('13700000000')
const mima = ref('111111')




const toLogin = async () => {
    const data: loginObjModel = {
        phone: phone.value,
        password: mima.value
    }
    if (ischecked.value[0] != 'a') {
        showNotify({ type: 'danger', message: '请勾选协议！' });
    } else {
        let res = await reqLogin(data)
        console.log(res)

        setToken(res.token)


        if (res) {
            showNotify({ type: 'success', message: '登陆成功', duration: 1000 });
            // sets
            router.push({ path: '/rank' })
        }
    }

}

const onClick = (name: any) => {
    if (name.name === 0) {
        isshow.value = true
    } else {
        isshow.value = false
    }
}
</script>

<style scoped lang="scss">
.van-cell-group--inset {
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid #e8e8e8;
}

.van-cell {
    /* margin-left: 0;
     */
    padding-left: 0;
    /* background-color: aqua; */
}

.van-field__label {
    width: 50px;
}

.login {
    position: relative;
    padding: 31px 40px 0;
    /* background-color: aquamarine; */

    .logo {
        margin-bottom: 20px;
        text-align: center;

        .img {
            width: 60%;
        }
    }

    .loging {
        text-align: center;
        margin-top: 20px;
    }

    .loginAgreement {
        margin-top: 20px;
        position: relative;

        .content {
            position: absolute;
            font-size: 14px;
            padding-top: 15px;
            top: -31px;
            left: 20px;

            .waring {
                color: orange;
            }
        }
    }

    .loginWay {
        position: absolute;
        bottom: -200px;
        width: 294px;
        height: 60px;
        text-align: center;

        .icon {
            display: flex;
            justify-content: space-evenly;
        }
    }
}
</style>